<template>
  <div class="component-products">
    <router-link v-for="(product, index) in list" :key="index" class="item-product" :to="{name: 'product', query: {id: product.id}}">
      <r-image :src="product.imageURL" class="image-product"/>
      <h3 class="title">{{ product.title }}</h3>
      <p class="desc"> {{product.description }}</p>
      <p>
        <span class="price-vip">{{product.vipPrice}}</span>
        <small class="price-default">{{product.price}}</small>
      </p>
    </router-link>
  </div>
</template>
<script>
import RImage from './r-image'
export default {
  name: 'r-products',
  components: {
    RImage
  },
  props: {
    list: {
      type: Array
    }
  }
}
</script>
<style lang="scss">
  @import "../styles/index";

  .component-products {
    overflow: hidden;
    padding: 6px;

    .item-product {
      float: left;
      background-color: white;
      margin: 6px;
      width: calc(50% - 12px);
      border-radius: 2px;

      .image-product {
        width: 169.5px;
        height: 169.5px;
      }

      > img {
        width: 100%;
        display: block;
      }

      > .title,
      > p {
        margin: 5px 8px;
        @extend %ellipsis;
      }

      > .title {
        font-weight: normal;
        color: #000;
        font-size: 14px;
        line-height: 20px;
      }

      > .desc {
        line-height: 20px;
        height: 20px;
        font-size: 12px;
        color: #999;
      }

      .price-default {
        font-size: 12px;
        color: #999;
        margin: 0 5px;
        text-decoration: line-through;
        padding: 0 3px;
      }

      .price-vip {
        color: $color-favorite;
        font-size: 14px;
      }
    }
  }
</style>
